<!-- 组合式 -->
<script setup>
	import {
		ref,
	} from 'vue';

	import util from '@/utils/util';

	// 参数接收
	const props = defineProps({

		// 背景颜色
		backgroundColor: {
			type: String,
			default: '#fff',
		},
		borderRadius: {
			type: String,
			default: '',
		},
		detailPage: {
			type: Boolean,
			default: false,
		},
		type: {
			type: String,
			default: 'announcement',
		},
		info: {
			type: Object,
			default: () => {
				return {};
			}
		},
	})

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();

	// 获取日期 dd / yyyy-mm
	function getTime(time = '', to = 'yyyy-mm') {
		
		if (!time) return '--'
		const arr = time.split(' ');
		const times = arr[0].split('-')
		
		if (to == 'yyyy-mm') {
			return times[0] + '-' + times[1];
		} else {
			return times[2];	
		}
	}

	// 详情
	function changeTo() {

		// 去登录
		// const login = util.GoLogin();
		// if (!login) return;
		let url = `/${props.type}-details`;
		let param = {
			id: props.info.id || ''
		};

		if (!param.id || !url) return;
		util.to(url, param);
	}

	// 回调
	const emit = defineEmits(['change'])
</script>


<template>
	<div class="l-card-announcement" :style="{backgroundColor}" @click="changeTo">

		<div class="time">
			<span>{{getTime(info.createTime, 'dd')}}</span>
			<p>{{getTime(info.createTime)}}</p>
		</div>

		<div class="info">
			<p class="title thd">{{info.title}}</p>
			<!-- <p class="content t2hd">{{info.content}}</p> -->
		</div>

	</div>
</template>


<style lang="scss">
	.l-card-announcement {
		cursor: pointer;
		padding: 20px;
		display: flex;
		overflow: hidden;

		.time {
			width: 100px;
			height: 100px;
			background: #F8F9F9;
			margin-right: 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			span {
				font-weight: bold;
				font-size: 24px;
				color: #5173F2;
				line-height: 36px;
			}

			p {
				font-size: 16px;
				color: #999999;
				line-height: 24px;
			}
		}

		.info {
			// flex: 1;
			max-width: calc(100% - 130px);
			display: flex;
			flex-direction: column;
			// justify-content: center;
			justify-content: space-between;

			.title {
				font-size: 20px;
				color: #333333;
				line-height: 50px;
			}

			.content {
				height: 50px;
				line-height: 25px;
				font-size: 14px;
				color: #999999;
			}
		}

	}
</style>